<template>
	<view class="customhead" :style="{height:totalHeight+'px'}">
		<view class="bg">
			<image class="bgimg" src="../../static/images/mentou.jpg" mode=""></image>
		</view>
		<view class="container">
			<view class="statusBar" :style="{height:statusBarHeight+'px'}"></view>
			<view class="service" :style="{height:titleBarHeight + 'px'}" v-if="!foldState">
				<view class="kefu">
					<u-icon name="server-fill" size="22" color="#ffffff"></u-icon>
				</view>
				<navigator class="manage">
					<u-icon name="bag-fill" size="22" color="#ffffff"></u-icon>
					<text>商家后台</text>
				</navigator>
			</view>
			
		
		
		<view class="body" :class="foldState?'fold':'' " :style="{height:bodyBarHeight + 'px'}">
			<view class="left">
				<view class="logo">
					<image class="img1" src="../../static/images/mentou.jpg" mode=""></image>
				</view>
				<view class="shopInfo">
					<view class="shopName">
						<text class="shopTitle">重庆特色烤鱼</text>
						<u-icon class="icon" name="more-circle" size="24" color="#fff" ></u-icon>
					</view>
					<view class="shopDes">关于店铺的一些介绍</view>
				</view>
			</view>
			<view class="right">
				<view class="pic">
					<image  class="img" src="../../static/images/code.jpeg" mode=""></image>
				</view>
				<text class="pay">直接付款</text>
			</view>
		</view>
		</view>
	</view>
</template>

<script>
	export default {
		name:"custom-head-bar",
		data() {
			return {
				statusBarHeight:0,
				titleBarHeight:0,
			};
		},
		props:{
			foldState:{
				type:Boolean,
				defaultValue:false
			}
		},
		computed:{
			totalHeight(){
				if(this.foldState) return this.statusBarHeight+this.titleBarHeight+10;
				return this.statusBarHeight+this.titleBarHeight+100+10
			},
			bodyBarHeight(){
				if(this.foldState) return this.titleBarHeight;
				return 100
			}
		},
		mounted() {
			let systemInfo = uni.getSystemInfoSync();
			this.statusBarHeight = systemInfo.statusBarHeight || 20;	
			
			// #ifdef MP-WEIXIN
			let menuBtnInfo = uni.getMenuButtonBoundingClientRect();
			this.titleBarHeight = menuBtnInfo.height + (menuBtnInfo.top - this.statusBarHeight)*2
			// console.log(menuBtnInfo.top,this.statusBarHeight,menuBtnInfo.height,this.titleBarHeight);
			// #endif
			this.titleBarHeight = 40 
		}
	}
</script>

<style lang="scss">
	.customhead{
		height: 400rpx;
		overflow: hidden;
		position: relative;
		.bg{
			width: 100%;
			height: 200rpx;
			background: #ffaa00;
			.bgimg{
				width: 100%;
				height: 100%;
				filter: blur(30rpx);
				transform: scale(2);
			}
			
		}
		.container{
			position: absolute;
			width: 100%;
			top: 0;
			left: 0;
			.statusBar{
				
			}
			.service{
				@include flex-box-set(start);
				padding-left: 20rpx;
				.manage{
					margin-left: 20rpx;
					font: size 24rpx;
					@include flex-box-set(start);
					color: #ffffff;
				}
			}
			.body{
				display: flex;
				justify-content: space-between;
				align-items: center;
				padding: 0 20rpx;
				height: 100px;
				transition: 0.3s;
				.left{
					width: 580rpx;
					display: flex;
					justify-content: start;
					align-items: center;
					.logo{
						width: 110rpx;
						height:110rpx;
						border-radius: 50%;
						overflow: hidden;
						.img1{
							width: 100%;
							height: 100%;
							}
							}
					.shopInfo{
						flex: 1;
						padding: 0 20rpx;
						.shopName{
							display: flex;
							font-size: 36rpx;
							font-weight: 800;
							align-items: center;
						}
						.shopDes{
							font-size: 26rpx;
							width: 100%;
							opacity: 0.8;
							padding-top: 5rpx;
							@include ellipsis();
						}
					}
				}
				.right{
					width: 120rpx;
					height: 120rpx;
					border-left: 1rpx solid rgba(255, 255, 255, 0.6);
					@include flex-box-set(between);
					flex-direction: column;
					.pic{
						width: 80rpx;
						height: 80rpx;
						.img{
							width: 100%;
							height: 100%;
						}
					}
					.pay{
						font-size: 22rpx;
						color: #fff;
						text-align: center;
					}
				}
				&.fold{
					padding: 0 30rpx;
					.left{
						.logo{
							width: 60rpx;
							height: 60rpx;
						}
						.shopInfo{
							padding-left: 15rpx;
							.shopName{
								font-size: 28rpx;
								.icon{
									transform: scale(0.8);
								}
							}
							.shopDes{
								display: none;
							}
						}
					}
					.right{
						display: none;
					}
				}
			}
		}
	}
</style>